<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="150px">
			<el-form-item label="佣金设置：" prop="commissionSet">
				<el-radio-group v-model="goodsInfoData.commissionSet"  @change="distributionCommissionTypeChangeFun">
					<el-radio :label=0>不参与(即不参与分销)</el-radio>
					<el-radio :label=1>系统默认</el-radio>
					<el-radio :label=2 :disabled="goodsInfoData.skuList.length == 0" >单独设置</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.commissionSet == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.distributionCommissionTypeList" :label="item.dictName" :key="index" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.commissionData.commissionDataItem${item.dictValue}`" 
								:rules="scope.row.commissionData[`commissionDataItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input placeholder="请输入"  v-model="scope.row.commissionData[`commissionDataItem${item.dictValue}`]">
									<template #prepend>
										<el-select placeholder="请选择" v-model="scope.row.commissionData[`commissionDataItem${item.dictValue}Type`]" class="width140">
											<el-option label="佣金比例" :value= 1 />
											<el-option label="固定佣金" :value= 2 />
										</el-select>
									</template>
									<template #append>
										<span> {{ scope.row.commissionData[`commissionDataItem${item.dictValue}Type`] == 1 ? '%' : '元' }}</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
		<section style="text-align: center; margin: 50px 0;">
			<el-button type="primary" size="large" @click="previousStep">上一步</el-button>
			<el-button type="primary" size="large" @click="nextStep(ruleFormRef)">下一步</el-button>
		</section>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { goodsInfo } from '/@/stores/goods';
const goodsInfoData = goodsInfo()
const ruleFormRef = ref<FormInstance>()
// 定义父组件传过来的值
const props = defineProps({
	distributionCommissionTypeList: {
		type: Array,
	},
});

const rules = reactive<FormRules<any>>({
	commissionSet: [{ required: true, message: '请选择佣金设置类型', trigger: 'change' }],
})

const distributionCommissionTypeChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.distributionCommissionTypeList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.distributionCommissionTypeList.map((item:any) =>{
					data[`commissionDataItem${item.dictValue}`] = null; //积分值
					data[`commissionDataItem${item.dictValue}Type`] = 1;  //积分值类型
				})
				item.commissionData = data;
			})
		}
	}
}

const emit = defineEmits(['stepChange','submitFun'])

// 上一步
const previousStep = () => {
	emit('stepChange', 'sixth')
}

// 下一步
const nextStep = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			emit('stepChange', 'eighth')
		} else {
			ElMessage.warning('请补全商品信息');
			// skuListFormRef.value.validate();
		}
	})
}

</script>

<style lang="scss" scoped>
.base-info-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-form{
		flex:1;
		overflow-y: auto;
		position: relative;
	}
}
</style>
